<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档对象模型</title>
</head>
<body>
    <div>上课不忘时间</div>
    <div class="box1">宽宽窄窄的小巷，桂花酒来桂花酿</div>
    <p>西域相似</p>
    <p>安帕特，安帕特</p>
    <p>山东技术哪家强，中国山东找蓝翔</p>
    <div id="box">
        <p class="box1">又菜又爱玩</p>
    </div>
    <ul>
        <li id="menu">家具</li>
        <li>美妆</li>
        <li>彩电</li>
    </ul>
    
</body>
<script>
    //获取页面元素(选择器)的主要方式：querySelector();
    //let const
    //选择器：标签选择器，id选择器，类选择器
    //querySelector()获取第一个元素
    const elm1 = document.querySelector('p');//通过标签选择
    console.log(elm1);
    //elm1.style.color = 'red';
    const elm2 = document.querySelector('#box');//通过id名选择
    console.log(elm2);
    const elm3 = document.querySelector('.box1');//通过类名选择
    console.log(elm3);
    //获取所有的元素
    const elm01 = document.querySelectorAll('div');
    console.log(elm01);
    console.log('----------------');
    //像遍历数组一样遍历elm01.
    //通过遍历伪数组elm01能获取指定位置的元素
    for (let i=0;i<elm01.length;i++){
        console.log(elm01[i]);
    }
    elm01[1].style.color = 'green';

    //获取子元素
    const son = document.querySelector('#box p');
    console.log(son);



    elm1.style.color = 'red';
</script>
</html>